<template>
  <div class="user">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-page-header @back="$router.back()" :content="courseName || '新增页面'">
        </el-page-header>
        <!-- <span >{{params.id ? '编辑' : '新增'}}</span> -->
      </div>
      <dh-form
        label-width="100px"
        label-position="left"
        :rules="rules"
        :formConfig="formConfig"
        :formParams="formParams"
        ref="dhForm"
      >
      <template v-slot:courseListImg={item}>
        <el-form-item v-show="item.vShow !== false" style="width:100%" v-bind="item" :prop="item.name">
         <course-img v-model="formParams[item.name]"/>
       </el-form-item>
      </template>
      <template v-slot:courseImgUrl={item}>
        <el-form-item :prop="item.name" v-show="item.vShow !== false" style="width:100%" v-bind="item">
         <course-img v-model="formParams[item.name]"/>
       </el-form-item>
      </template>
      <template v-slot:courseDescriptionMarkDown={item}>
        <dh-editor v-if="isEditSucccess" v-show="item.vShow !== false" style="width:100%" v-model="formParams[item.name]"/>
      </template>
      </dh-form>
      <el-button @click="saveCourse" type="primary" style="margin:10px auto;display: block;">保存</el-button>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import DhForm from '@/components/dh-components/dh-form/index.vue'
import CourseImg from './components/courseImg.vue'
import DhEditor from './components/dhEditor.vue'
import { saveOrUpdateCourse, getCourseById } from '@/services/course'
export default Vue.extend({
  components: {
    DhForm,
    CourseImg,
    DhEditor
  },
  name: 'coursesNew',
  data: function () {
    return {
      courseName: '',
      isEditSucccess: false,
      formParams: {
        // id: 0,
        courseName: '',
        brief: '',
        teacherDTO: {},
        // teacherDTO: {
        //   id: 0,
        //   courseId: 0,
        teacherName: '',
        teacherHeadPicUrl: '',
        position: '',
        description: '',
        // },
        courseDescriptionMarkDown: '',
        price: 0,
        discounts: 0,
        priceTag: '',
        discountsTag: '',
        isNew: true,
        isNewDes: '',
        courseListImg: '',
        courseImgUrl: '',
        sortNum: 0,
        previewFirstField: '',
        previewSecondField: '',
        status: 0,
        sales: 0,
        activityCourse: false,
        activityCourseDTO: {},
        // activityCourseDTO: {
        //   id: 0,
        //   courseId: 0,
        beginTime: '',
        endTime: '',
        amount: 0,
        stock: 0,
        // },
        autoOnlineTime: ''
      },
      rules: {
        // name: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ]
      },
      formConfig: [
        {
          name: 'alert',
          label: '基本信息',
          htmlType: 'alert',
          width: '100%',
          closable: false,
          style: {
            marginBottom: '10px'
          },
          // valueLimits:[['courseName','brief','teacherName','position','description','previewFirstField','previewSecondField']
          // ,['courseName']],
          nativeOn: {
            click: () => {
              const { formParams, visibilityAll } = this as any
              this.$set(formParams, 'alert', !formParams.alert)
              visibilityAll('alert', formParams.alert)
            }
          }
        },
        {
          name: 'courseName',
          label: '名称',
          showWordLimit: true,
          required: true,
          maxlength: 50
        },
        {
          name: 'brief',
          label: '简介',
          showWordLimit: true,
          maxlength: 100,
          required: true
        },
        {
          name: 'teacherName',
          showWordLimit: true,
          maxlength: 50,
          label: '讲师姓名',
          required: true
        },
        {
          name: 'position',
          showWordLimit: true,
          maxlength: 50,
          label: '职位',
          required: true
        },
        {
          name: 'description',
          showWordLimit: true,
          maxlength: 100,
          label: '讲师简介',
          required: true
        },
        {
          name: 'previewFirstField',
          label: '课程概述',
          showWordLimit: true,
          maxlength: 20,
          width: '48%',
          required: true
        },
        {
          name: 'previewSecondField',
          label: '',
          width: '50%',
          showWordLimit: true,
          maxlength: 20,
          required: true
        },
        {
          name: 'courseListImg',
          label: '课程封面',
          width: '50%',
          htmlType: 'slot',
          required: true
        },
        {
          name: 'courseImgUrl',
          label: '解锁封面',
          width: '50%',
          htmlType: 'slot',
          required: true
        },

        {
          name: 'sortNum',
          label: '课程排序',
          width: '50%',
          append: '数字控制排序，数字越大越靠后',
          type: 'number',
          required: true
        },

        {
          name: 'alert1',
          label: '营销信息',
          htmlType: 'alert',
          width: '100%',
          closable: false,
          style: {
            marginBottom: '10px'
          },
          nativeOn: {
            click: () => {
              const { formParams, visibilityAll } = this as any
              this.$set(formParams, 'alert1', !formParams.alert1)
              visibilityAll('alert1', formParams.alert1)
            }
          }
        },
        {
          name: 'discounts',
          label: '售卖价格',
          append: '元',
          type: 'number',
          required: true
        },
        {
          name: 'priceTag',
          append: '元',
          type: 'number',
          label: '商品原价'
        },
        {
          name: 'sales',
          append: '单',
          type: 'number',
          label: '销量'
        },
        {
          name: 'discountsTag',
          showWordLimit: true,
          maxlength: 4,
          label: '活动标签'
        },

        {
          name: 'alert2',
          label: '秒杀活动',
          htmlType: 'alert',
          width: '100%',
          closable: false,
          style: {
            marginBottom: '10px'
          },
          nativeOn: {
            click: () => {
              const { formParams, visibilityAll } = this as any
              this.$set(formParams, 'alert2', !formParams.alert2)
              visibilityAll('alert2', formParams.alert2)
            }
          }
        },
        {
          name: 'activityCourse',
          label: '限时秒杀开关',
          htmlType: 'switch',
          on: {
            change: () => {
              const { formParams, visibilityAll } = this as any
              visibilityAll('activityCourse', formParams.activityCourse)
            }
          }
        },
        {
          name: 'beginTime',
          label: '开始时间',
          htmlType: 'date',
          valueFormat: 'yyyy-MM-dd',
          vIf: false,
          format: 'yyyy 年 MM 月 dd 日'
        },
        {
          name: 'endTime',
          label: '结束时间',
          htmlType: 'date',
          vIf: false,
          valueFormat: 'yyyy-MM-dd',
          format: 'yyyy 年 MM 月 dd 日'
        },
        {
          name: 'amount',
          label: '秒杀价',
          vIf: false
        },
        {
          name: 'stock',
          vIf: false,
          label: '秒杀库存'
        },
        {
          name: 'alert3',
          label: '课程详情',
          htmlType: 'alert',
          width: '100%',
          closable: false,
          style: {
            marginBottom: '10px'
          },
          nativeOn: {
            click: () => {
              const { formParams, visibilityAll } = this as any
              this.$set(formParams, 'alert3', !formParams.alert3)
              visibilityAll('alert3', formParams.alert3)
            }
          }
        },
        {
          name: 'courseDescriptionMarkDown',
          htmlType: 'slot'
        }
      ]
    }
  },
  computed: {
    params () {
      return this.$route.query || {}
    }
  },
  async created () {
    if (this.params.id) {
      const {
        data: {
          activityCourseDTO = {},
          teacherDTO = {},
          ...formParams
        }
      } = await getCourseById({ courseId: this.params.id })
      this.courseName = formParams.courseName
      this.formParams = {
        activityCourseDTO,
        beginTime: (activityCourseDTO && activityCourseDTO.beginTime) || null,
        endTime: (activityCourseDTO && activityCourseDTO.endTime) || null,
        amount: (activityCourseDTO && activityCourseDTO.amount) || '',
        stock: (activityCourseDTO && activityCourseDTO.stock) || '',
        teacherDTO,
        teacherName: teacherDTO.teacherName,
        teacherHeadPicUrl: teacherDTO.teacherHeadPicUrl,
        position: teacherDTO.position,
        description: teacherDTO.description,
        ...formParams
      }
      if (activityCourseDTO && !activityCourseDTO.activityCourse) {
        this.visibilityAll('activityCourse', activityCourseDTO.activityCourse)
      }
    }
    (this.formParams as any) = { alert: true, alert1: true, alert2: true, alert3: true, ...this.formParams }
    this.isEditSucccess = true
  },
  methods: {
    async saveCourse () {
      const dhForm: any = this.$refs.dhForm
      try {
        await dhForm.$refs.dhForm.validate()
        const {
          activityCourseDTO = {},
          beginTime = '',
          endTime = '',
          amount = '',
          stock = '',
          teacherDTO = {},
          teacherName = '',
          teacherHeadPicUrl = '',
          position = '',
          description = '',
          ...formParams
        } = this.formParams
        await saveOrUpdateCourse({
          ...formParams,
          teacherDTO: {
            ...teacherDTO,
            teacherName,
            teacherHeadPicUrl,
            position,
            description
          },
          activityCourseDTO: {
            ...activityCourseDTO,
            beginTime,
            endTime,
            amount,
            stock
          }
        })
        this.$message.success(`${this.params.is ? '编辑' : '添加'}成功`)
        this.$router.replace({
          name: 'course'
        })
      } catch (error) {
        console.log(error)
      }
    },
    visibilityAll (name: string, value: boolean) {
      console.log(name, value)
      const index = this.formConfig.findIndex(item => item.name === name)
      for (let j = index + 1; j < this.formConfig.length; j++) {
        if (/^alert/.test(this.formConfig[j].name)) {
          break
        }
        if (name === 'activityCourse') {
          this.$set(this.formConfig[j], 'vIf', value)
          ;(this.formParams as any)[this.formConfig[j].name] = ''
        } else {
          this.$set(this.formConfig[j], 'vShow', value)
        }
      }
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
